<template>
  <template v-if="style.visible">
    <Teleport to="#rightContainer" :disabled="!style.visible">
      <div class="compo-drawer">
        <HeaderWithClose :title="title" @close="onClose" />
        <div class="box-content">
          <slot />
        </div>
      </div>
    </Teleport>
  </template>
</template>
<script setup>
import { reactive, toRefs, watchEffect, nextTick } from "vue";
import $ from "jquery";
import HeaderWithClose from "@/components/ui/HeaderWithClose.vue";

const state = reactive({
  style: {
    visible: false,
  },
  formData: {},
});
const { style, formData } = toRefs(state);

const props = defineProps({
  title: String, //标题
});

const emits = defineEmits(["change"]);

watchEffect(() => {
  emits("change", state.style.visible);
});

const onClose = () => {
  let $mainContainer = $("#mainContainer");
  let $container = $("#rightContainer");
  $mainContainer[0].style.setProperty("--rightContainer-width", "0px");
  state.style.visible = false;
};

defineExpose({
  show: () => {
    let $container = $("#rightContainer");
    $container.html("");
    state.style.visible = false;
    nextTick(() => {
      // 不toggle下 visible的值，同个组件连续调用show方法，会显示空白
      state.style.visible = false;
      state.style.visible = true;
      let $mainContainer = $("#mainContainer");
      $mainContainer[0].style.setProperty("--rightContainer-width", "300px");
      state.style.visible = true;
      setTimeout(() => {
        document.documentElement.scrollLeft = Number.MAX_SAFE_INTEGER;
      }, 10);
    });
  },
  close: () => {
    onClose();
  },
});
</script>
<style lang="scss">
.compo-drawer {
  @apply pt-[24px] pb-[10px] px-[14px] h-full box-border flex flex-col;
  .box-content {
    @apply mt-[6px] flex-1 overflow-scroll;
  }
}
</style>
